<template>
  <su-popup :show="show" type="right" @close="$emit('close')">
    <view class="drawer-content">
      <view class="drawer-title">关系图设置</view>
      <view class="drawer-item tight">
        <text class="drawer-label">节点大小</text>
        <view class="slider-row tight">
          <slider class="drawer-slider main-color" min="20" max="100" step="1" :value="setting.nodeSize" @change="handleNodeSizeChange" />
          <span class="slider-value">{{setting.nodeSize}}</span>
        </view>
      </view>
      <view class="drawer-item tight">
        <text class="drawer-label">节点颜色</text>
        <view class="color-palette tight centered">
          <view v-for="color in colorPalette" :key="color" class="color-block" :class="{selected: setting.nodeColor===color}" :style="{background: color}" @tap="handleNodeColorChange(color)"></view>
        </view>
      </view>
      <view class="drawer-item tight">
        <text class="drawer-label">线条粗细</text>
        <view class="line-width-group tight">
          <view v-for="(w,idx) in lineWidthOptions" :key="w.value" class="line-width-btn" :class="{selected: setting.edgeWidth===w.value}" @tap="handleEdgeWidthChange(w.value)">{{w.label}}</view>
        </view>
      </view>
      <view class="drawer-item tight">
        <text class="drawer-label">背景色</text>
        <view class="color-palette tight centered">
          <view v-for="color in colorPalette" :key="color" class="color-block" :class="{selected: setting.backgroundColor===color}" :style="{background: color}" @tap="handleBackgroundColorChange(color)"></view>
        </view>
      </view>

      <view class="drawer-actions small tight">
        <button class="mini-btn compact flat" @tap="handleApply">应用</button>
      </view>
    </view>
  </su-popup>
</template>

<script>
import SuPopup from '@/sheep/ui/su-popup/su-popup.vue';
import CommApi from '@/sheep/api/comm/comm';

export default {
  name: 'SettingDrawer',
  components: {
    SuPopup
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    setting: {
      type: Object,
      default: () => ({
        nodeSize: 40,
        nodeColor: '#8B5CF6',
        edgeWidth: 2,
        backgroundColor: '#e1eaff'
      })
    },
    colorPalette: {
      type: Array,
      default: () => [
        '#FFFFFF','#000000','#FF5722','#FF9800','#FFEB3B','#4ADE80','#22D3EE',
        '#2563EB','#A21CAF','#FCA5A5','#F59E42','#FDE68A','#6EE7B7','#5EEAD4'
      ]
    },
    lineWidthOptions: {
      type: Array,
      default: () => [
        { label: '细', value: 1 },
        { label: '略细', value: 2 },
        { label: '中等', value: 3 },
        { label: '略粗', value: 4 },
        { label: '粗', value: 6 }
      ]
    }
  },
  emits: ['close', 'apply', 'update:setting'],
  data() {
    return {
      localSetting: { ...this.setting }
    }
  },
  watch: {
    setting: {
      handler(newVal) {
        this.localSetting = { ...newVal };
      },
      deep: true
    }
  },
  methods: {
    handleNodeSizeChange(e) {
      this.localSetting.nodeSize = e.detail.value;
      this.emitUpdate();
    },
    
    handleNodeColorChange(color) {
      this.localSetting.nodeColor = color;
      this.emitUpdate();
    },
    
    handleEdgeWidthChange(value) {
      this.localSetting.edgeWidth = value;
      this.emitUpdate();
    },
    
    handleBackgroundColorChange(color) {
      this.localSetting.backgroundColor = color;
      this.emitUpdate();
    },
    
    emitUpdate() {
      this.$emit('update:setting', this.localSetting);
    },
    
    async handleApply() {
      try {
        // 应用设置到图表
        console.log('设置:', this.localSetting);
        
        // 保存设置到服务器
        const settingValue = JSON.stringify(this.localSetting);
        await CommApi.saveUserSetting({
          settingType: 'graph_setting',
          settingValue: settingValue
        });

        // 同时保存到本地存储 - 使用平台兼容的方式
        // #ifdef H5
        // #ifdef H5
        localStorage.setItem('graphSetting', settingValue);
        // #endif
        // #ifdef MP-WEIXIN
        uni.setStorageSync('graphSetting', settingValue);
        // #endif
        // #endif
        
        // #ifdef MP
        uni.setStorageSync('graphSetting', settingValue);
        // #endif

        this.$emit('apply', this.localSetting);
        this.$emit('close');
        uni.showToast({ title: '设置已保存' });
      } catch (error) {
        console.log('保存设置失败:', error);
        uni.showToast({ title: '保存设置失败', icon: 'error' });
        this.$emit('close');
      }
    }
  }
}
</script>

<style scoped>
/* 抽屉样式参考京东App */
.drawer-content {
  width: 80vw;
  max-width: 420px;
  min-width: 280px;
  background: #fff;
  border-radius: 18px 0 0 18px;
  box-shadow: -4px 0 24px rgba(0,0,0,0.10);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 80px;
  position: relative;
}

.drawer-title {
  font-size: 18px;
  font-weight: 600;
  padding: 22px 24px 10px 24px;
  border-bottom: 1px solid #f2f2f2;
  margin-bottom: 8px;
}

.drawer-item {
  margin: 0 24px 18px 24px;
  display: flex;
  flex-direction: column;
}

.drawer-item.tight {
  margin-bottom: 10px;
}

.drawer-label {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #222;
}

/* 滑动条样式 */
.slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.slider-row.tight {
  gap: 12px;
  margin-bottom: 0;
  align-items: center;
}

.drawer-slider {
  flex: 1;
  height: 28px;
}

.drawer-slider.main-color {
  flex: 1;
  height: 20px;
  accent-color: #2563eb;
  border-radius: 8px;
}

.slider-value {
  min-width: 32px;
  text-align: right;
  font-size: 15px;
  color: #2563eb;
  font-weight: 600;
}

/* 色块选择器样式 */
.color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 8px;
  margin-top: 6px;
  max-width: 210px;
}

.color-palette.tight {
  gap: 5px 5px;
  margin-top: 4px;
  max-width: 185px;
}

.color-palette.tight.centered {
  gap: 8px 8px;
  margin-top: 6px;
  max-width: 100%;
  justify-content: center;
  padding: 0 10px;
}

.color-block {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid #e5e6eb;
  cursor: pointer;
  box-sizing: border-box;
  transition: border 0.2s;
}

.color-block.selected {
  border: 2px solid #2563eb;
  box-shadow: 0 1px 4px rgba(37,99,235,0.20);
}

/* 白色色块特殊处理 */
.color-block[style*="background: rgb(255, 255, 255)"],
.color-block[style*="background:#FFFFFF"],
.color-block[style*="background: #FFFFFF"] {
  border: 1.5px solid #d1d5db;
}

.color-block[style*="background: rgb(255, 255, 255)"].selected,
.color-block[style*="background:#FFFFFF"].selected,
.color-block[style*="background: #FFFFFF"].selected {
  border: 2px solid #2563eb;
  box-shadow: 0 1px 4px rgba(37,99,235,0.20);
}

/* 线条粗细选择器样式 */
.line-width-group {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

.line-width-group.tight {
  gap: 2px;
  margin-top: 4px;
}

.line-width-btn {
  min-width: 36px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #f5f6fa;
  color: #333;
  font-size: 12px;
  text-align: center;
  border: 1px solid #f5f6fa;
  cursor: pointer;
  transition: all 0.2s;
}

.line-width-btn.selected {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  font-weight: 600;
}

/* 底部操作区样式 */
.drawer-actions {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 80vw;
  max-width: 420px;
  min-width: 280px;
  background: #fff;
  border-top: 1px solid #f2f2f2;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 14px 12px 18px 12px;
  z-index: 10010;
  box-sizing: border-box;
}

.drawer-actions.small {
  padding: 4px 6px 8px 6px;
  border-top: 1px solid #f2f2f2;
}

.drawer-actions.small.tight {
  padding: 8px 20px 12px 20px;
  margin-bottom: 4px;
}

.drawer-actions button {
  flex: 1;
  margin: 0 2px;
  padding: 6px 8px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  background: #f5f6fa;
  color: #222;
  transition: all 0.2s;
  min-height: 28px;
  max-width: calc(50% - 4px);
}

.drawer-actions.small .mini-btn {
  flex: 1;
  margin: 0 1px;
  padding: 3px 0;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
}

.drawer-actions.small .mini-btn.compact {
  max-width: 120px;
  margin: 0 auto;
  padding: 6px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  min-height: 32px;
}

.drawer-actions.small .mini-btn.compact.flat {
  max-width: 240px;
  margin: 0 auto;
  padding: 4px 50px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  min-height: 26px;
  background: #2563eb;
  color: #fff;
  box-shadow: 0 1px 3px rgba(37,99,235,0.15);
}
</style> 